<template>
  <vue-jsoneditor
      v-model="json"
  />
</template>

<script setup lang="ts">
import VueJsoneditor from 'vue3-ts-jsoneditor';
import {onMounted, ref, watch} from "vue";
let props = defineProps(["data"])
let emits = defineEmits(["update:data"])

console.log("pd",props.data)
let json=ref(props.data)

watch(()=>props.data,(c)=>{
  console.log("prop data in json",props.data)
  json.value = c
},{deep:true, immediate:true})

watch(json,(c)=>{
  console.log("json change",c)
  let cc
  if (typeof c == "string"){
    cc = JSON.parse(c)
  }else {
    cc = c
  }
  emits("update:data",cc)
})

</script>

<style scoped>

</style>
